<template>
	<el-card shadow="never" header="个性化设置">
		<el-form ref="form" :model="form" label-width="120px" style="margin-top:20px;">
			<el-form-item :label="$t('user.nightmode')">
				<el-switch v-model="config.dark" inline-prompt active-icon="el-icon-moon" inactive-icon="el-icon-sunny"></el-switch>
				<div class="el-form-item-msg">{{ $t('user.nightmode_msg') }}</div>
			</el-form-item>
			<el-form-item label="主题颜色">
				<el-color-picker v-model="config.colorPrimary" :predefine="colorList">></el-color-picker>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
import colorTool from "@/utils/color";

export default {
	name: "setting",
	data(){
		return{
			form:{},
			colorList: ['#5A55E4', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
			config: {
				lang:  this.$CONFIG.LANG,
				dark: this.$TOOL.data.get('APP_DARK') || false,
				colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR
			}
		}
	},
	methods:{
		async updateConfigTheme(val){
			var res = await this.$API.system.customConfig.savePersonalConfig.post("APP_THEME",val || 'default');
			if(res.success){
				if(val){
					document.documentElement.classList.add("dark")
					this.$TOOL.data.set("APP_DARK", val)
				}else{
					document.documentElement.classList.remove("dark")
					this.$TOOL.data.remove("APP_DARK")
				}
			}
		},
		async updateConfigColor(val){
			var res = await this.$API.system.customConfig.savePersonalConfig.post("APP_COLOR",val);
			if(res.success){
				document.documentElement.style.setProperty('--el-color-primary', val);
				for (let i = 1; i <= 9; i++) {
					document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(val,i/10));
					document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val,i/10));
				}
				document.documentElement.style.setProperty(`--el-color-primary-darken-1`, colorTool.darken(val,0.1));
				this.$TOOL.data.set("APP_COLOR", val);
			}
		},
	},
	watch:{
		'config.dark'(val){
			this.updateConfigTheme(val);
		},
		'config.colorPrimary'(val){
			this.updateConfigColor(val);
		}
	},
	mounted() {

	}
}
</script>

<style scoped>

</style>
